<template>
	<view class="y-button" @tap.stop="tap" :class="size">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props:{
			size:''
		},
		methods:{
			tap(){
				this.$emit('tap',this);
				this.$emit('click',this);
			}
		}
	}
</script>

<style lang="scss">
.y-button {
	white-space: nowrap;
	cursor: pointer;
	border-radius: 3000px;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	line-height: 1.9em;
	height: 2em;
	box-shadow: 0 0 10rpx 1px rgba(0, 0, 0,.1);
	background: linear-gradient(90deg, rgb(123, 146, 255) 0%, rgb(67, 109, 255) 100%);
	font-size: 20px;
	text-align: center;
	&.small{
		font-size: 22rpx;
		line-height: 1.7em;
		height: 1.8em;
		display: inline-block;
		text-align: center;
		padding: 0 1em;
	}
}
</style>
